<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安全检查登记 - 实验室辅助管理系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome-local.css}">
    <style>
        .check-form-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .check-items-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .check-item-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }

        .check-item-card:hover {
            border-color: #1a73e8;
            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.15);
        }

        .check-item-title {
            font-weight: 600;
            color: #1a73e8;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .check-item-title i {
            font-size: 20px;
        }

        .radio-options {
            display: flex;
            gap: 20px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 6px;
            transition: background-color 0.3s ease;
        }

        .radio-option:hover {
            background-color: rgba(26, 115, 232, 0.1);
        }

        .radio-option input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: #1a73e8;
        }

        .radio-option label {
            font-weight: 500;
            cursor: pointer;
        }

        .radio-option.normal {
            color: #34a853;
        }

        .radio-option.problem {
            color: #ea4335;
        }

        .overall-status {
            background: linear-gradient(135deg, #1a73e8, #0d47a1);
            color: white;
            border-radius: 10px;
            padding: 25px;
            margin: 25px 0;
        }

        .overall-status h3 {
            margin: 0 0 15px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .overall-options {
            display: flex;
            gap: 25px;
        }

        .overall-option {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .overall-option:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .overall-option input[type="radio"] {
            width: 20px;
            height: 20px;
        }

        .overall-option label {
            font-weight: 500;
            cursor: pointer;
            font-size: 16px;
        }

        .submit-section {
            text-align: center;
            margin-top: 30px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .btn-submit {
            background: linear-gradient(135deg, #34a853, #0f9d58);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(52, 168, 83, 0.3);
        }

        .btn-submit:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-submit:disabled:hover {
            transform: none;
            box-shadow: none;
        }

        .form-info {
            background: #e3f2fd;
            border-left: 4px solid #1a73e8;
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 0 8px 8px 0;
        }

        .form-info h4 {
            color: #1a73e8;
            margin: 0 0 8px 0;
        }

        .form-info p {
            margin: 0;
            color: #666;
        }

        .form-control:disabled {
            background-color: #f8f9fa;
            opacity: 0.6;
            cursor: not-allowed;
        }

        .form-text {
            font-size: 12px;
            margin-top: 5px;
            color: #6c757d;
        }

        .text-muted {
            color: #6c757d !important;
        }

        @media (max-width: 768px) {
            .check-items-grid {
                grid-template-columns: 1fr;
            }
            
            .radio-options {
                flex-direction: column;
                gap: 10px;
            }
            
            .overall-options {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="management-container">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-clipboard-check"></i> 安全检查</h2>
            </div>
            <ul class="nav-menu">
                <li th:if="${currentUser.role.name() == 'ADMIN'}"><a th:href="@{/dashboard}"><i class="fas fa-tachometer-alt"></i> 系统仪表盘</a></li>
                <li class="active"><a th:href="@{/safety-check}"><i class="fas fa-clipboard-check"></i> 安全检查登记</a></li>
                <li><a th:href="@{/safety-records}"><i class="fas fa-search"></i> 检查记录查询</a></li>
                <li th:if="${currentUser.role.name() == 'ADMIN'}"><a th:href="@{/college-management}"><i class="fas fa-university"></i> 学院管理</a></li>
                <li th:if="${currentUser.role.name() == 'ADMIN'}"><a th:href="@{/term-management}"><i class="fas fa-calendar-alt"></i> 学期管理</a></li>
                <li th:if="${currentUser.role.name() == 'ADMIN'}"><a th:href="@{/laboratory-management}"><i class="fas fa-microscope"></i> 实验室管理</a></li>
                <li th:if="${currentUser.role.name() == 'ADMIN'}"><a th:href="@{/user-management}"><i class="fas fa-users"></i> 用户管理</a></li>
                <li th:if="${currentUser.role.name() == 'ADMIN'}"><a th:href="@{/assignment-management}"><i class="fas fa-user-cog"></i> 管理员分配</a></li>
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <header class="top-bar">
                <div class="top-bar-left">
                    <h1>实验室安全检查登记</h1>
                </div>
                <div class="top-bar-right">
                    <div class="user-info">
                        <span th:text="${currentUser.name}">管理员</span>
                        <a th:href="@{/logout}" class="logout-btn">退出</a>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content">
                <div class="check-form-container">
                    <!-- 提示信息 -->
                    <div class="form-info">
                        <h4><i class="fas fa-info-circle"></i> 检查说明</h4>
                        <p>请仔细检查实验室各项安全设施，如发现异常情况请及时标记并在备注中详细说明。</p>
                    </div>

                    <!-- 检查表单 -->
                    <div class="card">
                        <div class="card-body">
                            <form id="checkForm" th:action="@{/api/safety-check}" method="post" data-custom-handler="true">
                                <!-- 基本信息 -->
                                <div class="row" style="display: flex; gap: 20px; margin-bottom: 25px;">
                                    <div class="form-group" style="flex: 1;">
                                        <label for="checkTerm">选择学期</label>
                                        <select id="checkTerm" name="termId" class="form-control" required>
                                            <option value="">-- 请选择学期 --</option>
                                            <option th:each="term : ${terms}" 
                                                    th:value="${term.id}" 
                                                    th:text="${term.name}"
                                                    th:data-start-date="${term.startDate}"
                                                    th:data-end-date="${term.endDate}"
                                                    th:selected="${term.status == T(com.it.labservice.entity.Term$TermStatus).CURRENT}">2023学年下学期</option>
                                        </select>
                                    </div>
                                    
                                    <div class="form-group" style="flex: 1;">
                                        <label for="checkLab">选择实验室</label>
                                        <select id="checkLab" name="laboratoryId" class="form-control" required>
                                            <option value="">-- 请选择实验室 --</option>
                                            <option th:each="lab : ${userLaboratories}" 
                                                    th:value="${lab.id}" 
                                                    th:text="${lab.name}">计算机基础实验室</option>
                                        </select>
                                    </div>

                                    <div class="form-group" style="flex: 1;">
                                        <label for="checkDate">检查日期</label>
                                        <input type="date" id="checkDate" name="checkDate" class="form-control" required disabled>
                                        <small class="form-text text-muted">请先选择学期</small>
                                    </div>
                                </div>

                                <!-- 安全检查项目 -->
                                <h3 style="margin: 30px 0 20px; color: #1a73e8; text-align: center;">
                                    <i class="fas fa-tasks"></i> 安全检查项目
                                </h3>
                                
                                <div class="check-items-grid">
                                    <!-- 门窗检查 -->
                                    <div class="check-item-card">
                                        <div class="check-item-title">
                                            <i class="fas fa-door-open"></i>
                                            门窗安全
                                        </div>
                                        <div class="radio-options">
                                            <div class="radio-option normal">
                                                <input type="radio" name="window" id="window-ok" value="ok" checked>
                                                <label for="window-ok">正常</label>
                                            </div>
                                            <div class="radio-option problem">
                                                <input type="radio" name="window" id="window-problem" value="problem">
                                                <label for="window-problem">异常</label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 电路检查 -->
                                    <div class="check-item-card">
                                        <div class="check-item-title">
                                            <i class="fas fa-bolt"></i>
                                            电路安全
                                        </div>
                                        <div class="radio-options">
                                            <div class="radio-option normal">
                                                <input type="radio" name="circuit" id="circuit-ok" value="ok" checked>
                                                <label for="circuit-ok">正常</label>
                                            </div>
                                            <div class="radio-option problem">
                                                <input type="radio" name="circuit" id="circuit-problem" value="problem">
                                                <label for="circuit-problem">异常</label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 消防设施 -->
                                    <div class="check-item-card">
                                        <div class="check-item-title">
                                            <i class="fas fa-fire-extinguisher"></i>
                                            消防设施
                                        </div>
                                        <div class="radio-options">
                                            <div class="radio-option normal">
                                                <input type="radio" name="fire" id="fire-ok" value="ok" checked>
                                                <label for="fire-ok">正常</label>
                                            </div>
                                            <div class="radio-option problem">
                                                <input type="radio" name="fire" id="fire-problem" value="problem">
                                                <label for="fire-problem">异常</label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 仪器设备 -->
                                    <div class="check-item-card">
                                        <div class="check-item-title">
                                            <i class="fas fa-microscope"></i>
                                            仪器设备
                                        </div>
                                        <div class="radio-options">
                                            <div class="radio-option normal">
                                                <input type="radio" name="equipment" id="equipment-ok" value="ok" checked>
                                                <label for="equipment-ok">正常</label>
                                            </div>
                                            <div class="radio-option problem">
                                                <input type="radio" name="equipment" id="equipment-problem" value="problem">
                                                <label for="equipment-problem">异常</label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 物品摆放 -->
                                    <div class="check-item-card">
                                        <div class="check-item-title">
                                            <i class="fas fa-boxes"></i>
                                            物品摆放
                                        </div>
                                        <div class="radio-options">
                                            <div class="radio-option normal">
                                                <input type="radio" name="items" id="items-ok" value="ok" checked>
                                                <label for="items-ok">正常</label>
                                            </div>
                                            <div class="radio-option problem">
                                                <input type="radio" name="items" id="items-problem" value="problem">
                                                <label for="items-problem">异常</label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 清洁卫生 -->
                                    <div class="check-item-card">
                                        <div class="check-item-title">
                                            <i class="fas fa-broom"></i>
                                            清洁卫生
                                        </div>
                                        <div class="radio-options">
                                            <div class="radio-option normal">
                                                <input type="radio" name="hygiene" id="hygiene-ok" value="ok" checked>
                                                <label for="hygiene-ok">合格</label>
                                            </div>
                                            <div class="radio-option problem">
                                                <input type="radio" name="hygiene" id="hygiene-problem" value="problem">
                                                <label for="hygiene-problem">不合格</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 其他安全隐患 -->
                                <div class="form-group" style="margin: 30px 0;">
                                    <label for="other" style="font-size: 18px; font-weight: 600; color: #1a73e8;">
                                        <i class="fas fa-exclamation-triangle"></i> 其他安全隐患说明
                                    </label>
                                    <textarea id="other" name="otherIssues" class="form-control" rows="4" 
                                              placeholder="请详细描述发现的其他安全隐患或需要注意的问题..."></textarea>
                                </div>

                                <!-- 总体状态 -->
                                <div class="overall-status">
                                    <h3><i class="fas fa-clipboard-list"></i> 总体检查结果</h3>
                                    <div class="overall-options">
                                        <div class="overall-option">
                                            <input type="radio" name="overall" id="overall-normal" value="normal" checked>
                                            <label for="overall-normal">
                                                <i class="fas fa-check-circle"></i> 正常
                                            </label>
                                        </div>
                                        <div class="overall-option">
                                            <input type="radio" name="overall" id="overall-abnormal" value="abnormal">
                                            <label for="overall-abnormal">
                                                <i class="fas fa-exclamation-circle"></i> 异常
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- 提交按钮 -->
                                <div class="submit-section">
                                    <button type="submit" class="btn-submit">
                                        <i class="fas fa-save"></i>
                                        提交安全检查登记
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script th:src="@{/js/app.js}"></script>
    <script>
        // Element UI 风格消息提示
        function showMessage(message, type = 'info') {
            const colors = {
                success: '#67C23A',
                error: '#F56C6C',
                warning: '#E6A23C',
                info: '#409EFF'
            };
            
            const messageEl = document.createElement('div');
            messageEl.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: white;
                color: ${colors[type]};
                padding: 15px 20px;
                border: 1px solid ${colors[type]};
                border-radius: 4px;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
                z-index: 9999;
                font-size: 14px;
                max-width: 300px;
                transform: translateX(100%);
                transition: transform 0.3s ease;
            `;
            messageEl.innerHTML = `
                <div style="display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'times-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
                    <span>${message}</span>
                    <i class="fas fa-times" style="margin-left: auto; cursor: pointer; opacity: 0.6;" onclick="this.closest('div').parentElement.remove()"></i>
                </div>
            `;
            
            document.body.appendChild(messageEl);
            
            // 滑入动画
            setTimeout(() => {
                messageEl.style.transform = 'translateX(0)';
            }, 10);
            
            // 4秒后自动消失
            setTimeout(() => {
                if (messageEl.parentNode) {
                    messageEl.style.transform = 'translateX(100%)';
                    setTimeout(() => {
                        if (messageEl.parentNode) {
                            messageEl.remove();
                        }
                    }, 300);
                }
            }, 4000);
        }
    </script>
    <script>
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            const termSelect = document.getElementById('checkTerm');
            const dateInput = document.getElementById('checkDate');
            const labSelect = document.getElementById('checkLab');
            
            // 学期选择变化事件
            termSelect.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                
                if (this.value) {
                    const startDate = selectedOption.getAttribute('data-start-date');
                    const endDate = selectedOption.getAttribute('data-end-date');
                    
                    // 启用日期选择器并设置范围
                    dateInput.disabled = false;
                    dateInput.min = startDate;
                    dateInput.max = endDate;
                    
                    // 设置默认日期为今天（如果在范围内）
                    const today = new Date().toISOString().split('T')[0];
                    if (today >= startDate && today <= endDate) {
                        dateInput.value = today;
                    } else {
                        // 如果今天不在范围内，设置为开始日期
                        dateInput.value = startDate;
                    }
                    
                    // 更新提示文本
                    const helpText = dateInput.nextElementSibling;
                    helpText.textContent = `可选日期范围：${startDate} 至 ${endDate}`;
                    
                    // 检查是否有重复记录
                    checkDuplicateRecord();
                } else {
                    // 禁用日期选择器
                    dateInput.disabled = true;
                    dateInput.value = '';
                    dateInput.min = '';
                    dateInput.max = '';
                    
                    // 重置提示文本
                    const helpText = dateInput.nextElementSibling;
                    helpText.textContent = '请先选择学期';
                }
            });
            
            // 实验室选择变化事件
            labSelect.addEventListener('change', function() {
                checkDuplicateRecord();
            });
            
            // 日期选择变化事件
            dateInput.addEventListener('change', function() {
                checkDuplicateRecord();
            });
            
            // 如果有默认选中的学期，触发change事件
            if (termSelect.value) {
                termSelect.dispatchEvent(new Event('change'));
            }
        });

        // 检查是否存在重复记录
        function checkDuplicateRecord() {
            const labSelect = document.getElementById('checkLab');
            const dateInput = document.getElementById('checkDate');
            const submitBtn = document.querySelector('.btn-submit');
            
            if (!labSelect.value || !dateInput.value) {
                // 如果实验室或日期未选择，启用提交按钮
                submitBtn.disabled = false;
                submitBtn.style.opacity = '1';
                return;
            }
            
            fetch(`/api/safety-check/exists?laboratoryId=${labSelect.value}&checkDate=${dateInput.value}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.exists) {
                        // 存在重复记录，禁用提交按钮并显示警告
                        submitBtn.disabled = true;
                        submitBtn.style.opacity = '0.5';
                        showMessage(data.message, 'warning');
                    } else {
                        // 不存在重复记录，启用提交按钮
                        submitBtn.disabled = false;
                        submitBtn.style.opacity = '1';
                    }
                })
                .catch(error => {
                    console.error('Error checking duplicate:', error);
                    // 出错时启用提交按钮
                    submitBtn.disabled = false;
                    submitBtn.style.opacity = '1';
                });
        }

        // 表单提交处理
        document.getElementById('checkForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            
            fetch('/api/safety-check', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showMessage(data.message, 'success');
                    // 重置表单
                    this.reset();
                    // 重新触发学期选择事件以重置日期
                    const termSelect = document.getElementById('checkTerm');
                    if (termSelect.value) {
                        termSelect.dispatchEvent(new Event('change'));
                    } else {
                        // 如果没有选择学期，禁用日期输入
                        const dateInput = document.getElementById('checkDate');
                        dateInput.disabled = true;
                        dateInput.value = '';
                        const helpText = dateInput.nextElementSibling;
                        helpText.textContent = '请先选择学期';
                    }
                } else {
                    showMessage('提交失败：' + data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showMessage('提交失败，请稍后重试', 'error');
            });
        });

        // 动态更新总体状态
        document.querySelectorAll('input[type="radio"]').forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.name !== 'overall') {
                    updateOverallStatus();
                }
            });
        });

        function updateOverallStatus() {
            const checkItems = ['window', 'circuit', 'fire', 'equipment', 'items', 'hygiene'];
            let hasProblems = false;

            checkItems.forEach(item => {
                const problemRadio = document.querySelector(`input[name="${item}"][value="problem"]`);
                if (problemRadio && problemRadio.checked) {
                    hasProblems = true;
                }
            });

            // 根据检查项目自动设置总体状态
            if (hasProblems) {
                document.getElementById('overall-abnormal').checked = true;
            } else {
                document.getElementById('overall-normal').checked = true;
            }
        }
    </script>
</body>
</html> 